<template>
  <div class="basket" style="minHeight:550px">
    <el-container>
      <el-header>
        <el-divider>购物车</el-divider>
      </el-header>
      <el-main>
        <!-- 商品列表部分 -->
        <el-table :data="list" style="width: 100%;" v-show="list.length" highlight-current-row  ref="multipleTable" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column label="商品名" prop="productName" width="100px"></el-table-column>
          <el-table-column label="商品图片" prop="pic">
            <template slot-scope="props">
              <img :src="getPic(props.row.productPic)" alt style="width:100px ;height:100px" />
            </template>
          </el-table-column>
          <el-table-column prop="price" label="商品价钱(￥)" ></el-table-column>
          <el-table-column label="商品数量">
            <template slot-scope="scope">
              <el-input-number v-model="scope.row.count"  @change="handleChange(scope.row.count,scope.$index)" size="mini" :min="1" :max="140"></el-input-number>
            </template>
          </el-table-column>
          <el-table-column label="商品总价">
            <template slot-scope="scope">
              <div>{{scope.row.price*scope.row.count|formatMoney(scope.row.price*scope.row.count)}}</div>
            </template>
          </el-table-column>
          <el-table-column label="商品删除" >
            <template slot-scope="scope">
              <el-popover placement="top" v-model="scope.row.remove">
                <p>亲！确定删除此商品吗？</p>
                <div style="text-align: right; margin: 0">
                  <el-button size="mini" type="text" @click="scope.row.remove=false">取消</el-button>
                  <el-button type="primary" size="mini" @click="removeId(scope.$index)">确定</el-button>
                </div>
                <el-button slot="reference">删除</el-button>
              </el-popover>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <el-footer>
        <div v-show="list.length==0" style="font-size:20px;color:#ccc;display:none">购物车空空如也！</div>
        <div class="totalPrice">
          总价:
          <span>{{countList|formatMoney(countList)}}</span>
        </div>
        <div class="next-btn-wrap">
          <span class="btn btn-danger" style="width: 200px" @click="addOrder">结账</span>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list:[],
      count: 0,
      multipleTable:[],
      countList:0
    };
  },
  filters: {
    // 格式化金钱
    formatMoney(price) {
      return "￥ " + price.toFixed(2);
    }
  },
  computed: {
    user:{
      get(){
         return this.$store.state.user
      },
      set(v){
        this.$store.state.user=v
      }
    },
  },
  methods: {
  
 handleSelectionChange(val) {
        this.multipleSelection = val;
        console.log(val)
        var a=0
         for (let i = 0; i < this.multipleSelection.length; i++) {
          a += this.multipleSelection[i].price * this.multipleSelection[i].count;
        }
        this.countList=a;
        this.$store.state.payCount=a;
       console.log('payCount='+this.$store.state.payCount)
      },

    getPic(pic){
      let path = 'http://localhost:3000/images/' + pic
      console.log(path)      
      return path
    },
    // 实现删除操作
    removeId(index, rows) {
      console.log('rows='+index)
      console.log(this.list[index])
      this.list.splice(index, 1);
       
       this.$axios.delete("http://localhost:3000/shopping/delProduct/"+this.list[index].shopId)
       .then(res=>{
        //  console.log(res.data)
         this.$message("删除成功")
       })
       .catch(err=>{
         console.log(err)
       })
      
    },
     handleChange(value,index) {
       console.log(value,this.list[index].shopId)
       this.$axios.put("http://localhost:3000/shopping/updateProductNum/"+this.list[index].shopId+"/"+value)
       .then(res=>{
         console.log(res.data.data)
       })
       .catch(err=>{
         console.log(err)
       })
      },
    addOrder() {
     
      var shopIds=[]
      for (let i = 0; i < this.multipleSelection.length; i++) {
            shopIds.push(this.multipleSelection[i].shopId)
      } 
      console.log(shopIds)
      if(shopIds.length==0){
        this.$message("请先选择商品哦")
      }else{
        // {params:{shopId:shopIds}}
        this.$store.state.shopIds=shopIds
        console.log('shopId:'+ this.$store.state.shopIds)
       this.$router.push('/index/order/comfirm');
      }
    }
  },
  created(){
     this.$store.state.navIndex="0"

     this.$axios.get("http://localhost:3000/shopping/"+this.user[0].userId)
     .then(res=>{
       console.log(res.data.data)
       this.list=res.data.data
       
     })
     .catch(err=>{
       console.log(err)
     })
  }
};
</script>

<style scoped>
.basket {
  width: 70%;
  min-height: 770px;
  background-image: url(../assets/body_bg.png);
  margin: 0 auto;
  font-family: "KaiTi"
}
.basket >>>.el-table .cell{
  padding: 0px;
}
.warning-row {
  background-color: aqua !important;
}
.next-btn-wrap {
  float: right;
}
.totalPrice {
  float: left;
}
div.el-divider__text,
div.el-link {
  font-weight: 500;
  font-size: 24px;
}
</style>